<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
</head>
<style>
    body
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background:linear-gradient(to right,rgb(9, 245, 245),rgb(67, 36, 240))
    }

    .title
    {
        color:rgb(158, 75, 75);
    }

    .register_box
    {
        width: 800px;
        height: 600px;
        border: 5px solid rgb(0, 0, 0);
        box-sizing: border-box;
        background: rgb(255, 255, 255);
    }

    .name_box
    {
        position: relative;
        left: 200px;;
        top: 120px;
    }

    .name
    {
        font-size: 25px;
        border-radius: 4px;
    }

    .name_box::before 
    {
        content: "昵称：";
        font-size: 25px;
    }


    .account_box
    {
        position: relative;
        left: 200px;;
        top: 120px;
    }

    .account
    {
        font-size: 25px;
        border-radius: 4px;
    }

    .account_box::before 
    {
        content: "账号：";
        font-size: 25px;
    }

    .password_box
    {
        position: relative;
        left: 200px;
        top: 120px;
    }

    .password
    {
        font-size: 25px;
        border-radius: 4px;
    }

    .password_box::before 
    {
        content: "密码：";
        font-size: 25px;
    }

    .ag_password_box
    {
        position: relative;
        left: 150px;
        top: 120px;
    }

    .ag_password
    {
        font-size: 25px;
        border-radius: 4px;
    }

    .ag_password_box::before 
    {
        content: "确认密码：";
        font-size: 25px;
    }

    .error-msg 
    {
        position: relative;
        left: 280px;
        top: 100px;
        color: red;
        font-size: 20px;
        height: 18px;
        margin-top: 4px;
        visibility: hidden;
    }

    .register_button_box
    {
        position: relative;
        left: 150px;
        top: 120px;
    }

    .register_button
    {
        width: 500px;
        height: 60px; 
        font-size: 20px;
        color:rgb(255, 255, 255);
        background-color: rgb(0, 0, 0);
        border: 0px;
        border-radius: 10px;
    }
</style>
<body>
    <h1 class="title">加入我们，这辈子算是有了</h1>
    <div class="register_box">
    <form id="registerForm">
        <div class="name_box">
            <input class="name" id="name" type="text" placeholder="请输入昵称" >
        </div><br>
        <div id="nameError" class="error-msg"></div>

        <div class="account_box">
            <input class="account" id="account" type="text" placeholder="请输入账号">
        </div><br>
        <div id="accountError" class="error-msg"></div>

        <div class="password_box">
            <input class="password" id="password" type="password" placeholder="请输入密码">
        </div><br>
        <div id="passwordError" class="error-msg"></div>

        <div class="ag_password_box">
            <input class="ag_password" id="ag_password" type="password" placeholder="请确认密码">
        </div><br>
        <div id="ag_passwordError" class="error-msg"></div>

        <div class="register_button_box">
            <button class="register_button" id="register_button">注册</button>
        </div>
    </form>
    </div>

    <script>
        document.getElementById("registerForm").addEventListener("submit", function (e) 
        {
        e.preventDefault(); // 阻止表单默认提交

        let name = document.getElementById("name").value;
        let account = document.getElementById("account").value;
        let password = document.getElementById("password").value;
        let ag_password = document.getElementById("ag_password").value;
        let loginbutton=document.getElementById("login_button");
        let isValid = true;

        if (name.trim() === "") {
            document.getElementById("nameError").textContent = "请输入昵称";
            document.getElementById("nameError").style.visibility = "visible";
            isValid = false;
        } else {
            document.getElementById("nameError").style.visibility = "hidden";
        }

        // 验证账号
        if (isValid && account.trim() === "") {
            document.getElementById("accountError").textContent = "请输入账号";
            document.getElementById("accountError").style.visibility = "visible";
            isValid = false;
        } else {
            document.getElementById("accountError").style.visibility = "hidden";
        }

        // 验证密码（仅在账号通过验证后检查）
        if (isValid && password.trim() === "") {
            document.getElementById("passwordError").textContent = "请输入密码";
            document.getElementById("passwordError").style.visibility = "visible";
            isValid = false;
        } else {
            document.getElementById("passwordError").style.visibility = "hidden";
        }

        if (isValid && ag_password.trim() === "") {
            document.getElementById("ag_passwordError").textContent = "请确认密码";
            document.getElementById("ag_passwordError").style.visibility = "visible";
            isValid = false;
            return;
        } else {
            document.getElementById("ag_passwordError").style.visibility = "hidden";
        }

        if (isValid && ag_password.trim() != password.trim()) {
            document.getElementById("ag_passwordError").textContent = "请输入密码一致";
            document.getElementById("ag_passwordError").style.visibility = "visible";
            isValid = false;
        } else {
            document.getElementById("ag_passwordError").style.visibility = "hidden";
        }

        if (!isValid) return;

        fetch('/reg', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            name:name,
            account: account,
            password: password
        })
        })
        .then(response => {
        if (response.status === 200) {
            window.location.href = '/login.html'; 
        } 
        return response.json();
        })
        .then(data => {
            showError("ag_passwordError",data.reason);
            // document.getElementById("account").value = "";
            // document.getElementById("password").value = "";
        })

        function showError(elementId, data) {
        const errorElement = document.getElementById(elementId);
        errorElement.style.visibility = "hidden";
        errorElement.textContent = data;
        errorElement.style.visibility = 'visible';
        }
        });


    </script>
</body>
</html>